<script setup>
import { computed,unref,onMounted,ref, nextTick  } from 'vue';
import { SYSTEM_WINDOW_INFO } from '../../utils/config';
import { navBarH } from '../../utils/system';
import { useCartStore } from '../../stores/cart';
import { useGoodsCategoryApi,useGoodsDetailsApi } from '../../apis/goods';
import { before } from 'xe-utils';
import { formatPrice } from '../../utils/format';
import { routerTo } from '../../utils/common';
//购物车信息
const cartStore=useCartStore()
//搜索文本
const searchVal=ref('')
//具体物品
const goodItem=ref({})
//滑轮高度
const mainScrollHeight=ref(0)
//导航栏索引
const activeIndex=ref()
//sku弹窗组件
const skuPopupRef=ref()
//cart弹窗组件
const cartPopupRef=ref()
//skuId
const skuId=ref()
//商品列表
const {data:categoryList=[]}=useGoodsCategoryApi()
//商品详情
const {data:goodsDetails}=useGoodsDetailsApi()

//点击切换类别·事件
const onClassTab=(item)=>{
	activeIndex.value=item._id
	mainScrollHeight.value=item.top
}

//滑动事件
const onScroll=(e)=>{
	let scrollTop = e.detail.scrollTop;
	let results = categoryList.filter(item=>item.top < scrollTop+2).reverse()
	if(results.length > 0 ) activeIndex.value = results[0]._id;
}



//购物栏界面高度
const containerHeight=computed(()=>{
	let tabBarH=0
	// #ifdef H5
	tabBarH=50
	// #endif
	return `${SYSTEM_WINDOW_INFO.windowHeight-unref(navBarH)-45-uni.rpx2px(100)-tabBarH}px`
})

//计算高度
const calcHeight=()=>{
	let h=0
	categoryList.forEach((item,index)=>{
		const view=uni.createSelectorQuery().select(`#module-${item._id}`)
		view.fields({size:true},data=>{
			item.top=Math.floor(h)
			h+=data.height
		}).exec()
	})
}

//打开sku弹窗
const onOpenSku=(item)=>{
	//console.log(item._id)
	goodItem.value=goodsDetails
	skuId.value=goodsDetails?.sku?.[0]._id||""
	skuPopupRef.value.open()
}

//打开cart弹窗
const onOpenCart=()=>{
	cartPopupRef.value.open()
}

//关闭弹窗
const onCloseSku=()=>{
	skuPopupRef.value.close()
}

//搜索事件
const onSearch=()=>{
	routerTo("/pages/shop/search?keyword="+unref(searchVal))
}

//查看商品详情
const handleDetails=()=>{
	routerTo("/pages/shop/details")
}

//渲染完毕
onMounted(()=>{
	activeIndex.value=categoryList[0]._id
	calcHeight()
})

</script>


<template>
  <view class="page-wrap">
    <tar-bar title="商城" title-color="#fff"></tar-bar>
	<search @on-confirm="onSearch" v-model:keyword="searchVal"></search>
	
	<view class="container">
		<scroll-view class="aside" scroll-y>
			<view class="item" @tap="onClassTab(item)" :class="{active:item._id==activeIndex}" v-for="item in categoryList" :key="item._id">{{item.name}}</view>
		</scroll-view>
		<scroll-view class="main" scroll-y  :scroll-top="mainScrollHeight" @scroll="onScroll" scroll-with-animation>
			<view :id="`module-${group._id}`" class="group" v-for="group in categoryList" :key="group._id">
				<view class="name">{{group.name}}</view>
				<view class="list">
					<view class="item" v-for="good in group.goods" :key="good._id" @tap="handleDetails">
						<card-goods-info :good="good" @select-buy="onOpenSku" :Type="1"></card-goods-info>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
	<!--购物车-->
	<view class="shop-bar">
		<view class="content">
			<view class="left">
				<view class="icon-wrap" @tap="onOpenCart">
					<view class="iconfont icon-caigou"></view>
					<view class="tag" v-if="cartStore.goodsNum>0">{{cartStore.goodsNum||0}}</view>
				</view>
				<view class="price-wrap">
					<text>合计:￥</text>
					<view class="num">{{formatPrice(cartStore.priceSum)||0}}</view>
				</view>
			</view>
			<view class="right">
				<button class="settle" v-if="cartStore.goodsNum>0">去结算</button>
			</view>
		</view>
	</view>
	
	<!--sku弹窗-->
	<uni-popup ref="skuPopupRef" type="bottom">
		<view class="sku-pop-wrap">
			<shop-sku :good="goodItem" v-model:sku-id="skuId" @close-sku="onCloseSku"></shop-sku>
		</view>
	</uni-popup>
	
	<!--购物车弹窗-->
	<uni-popup ref="cartPopupRef"  type="bottom" :safe-area="false">
		<view class="cart-pop-wrap">
			<shop-cart></shop-cart>
		</view>
	</uni-popup>
  </view>
</template>


<style lang="scss" scoped>
.page-wrap{
	.container{
		display: flex;
		justify-content: space-between;
		height: v-bind(containerHeight);
		border: 1px solid red;
		.aside{
			height: 100%;
			width: 200rpx;
			border:1px solid green;
			flex-shrink: 0;
			.item{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100rpx;
				font-size: 28rpx;
				color: #666;
				position: relative;
				&.active{
					color:$uni-color-primary;
					background: #fff;
					&::after{
						content:"";
						display: block;
						position: absolute;
						left:0;
						top:50%;
						width: 8rpx;
						height: 36rpx;
						background: $uni-color-paragraph;
						transform: translateY(-50%);
						border-radius:0 10rpx 10rpx 0;
					}
				}
			}
		}
		.main{
			flex: 1;
			height: 100%;
			.group{
				.name{
					font-size: 28rpx;
					color:#333;
					padding: 10rpx 24rpx;
					position: sticky;
					top: 0;
					left: 0;
					background-color: #fff;
				}
				.list{
					padding: 24rpx;
					padding-top: 0;
					display: grid;
					gap: 24rpx;
				}
			}
		}
	}
	.shop-bar {
				position: fixed;
				width: 100%;
				left: 0;
				//#ifdef H5
				bottom: 50px;
				//#endif
				//#ifndef H5
				bottom: 0;
	
				//#endif
				.content {
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 100rpx;
					padding: 0 24rpx;
					box-sizing: border-box;
					background-color: #6a6a6a;
	
					.left {
						display: flex;
						align-items: center;
						height: 100%;
	
						.icon-wrap {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 112rpx;
							height: 112rpx;
							border-radius: 50%;
							background-color: $uni-color-primary;
							position: absolute;
							top: -30rpx;
							left: 24rpx;
	
							.iconfont {
								font-size: 50rpx;
								color: #fff;
							}
	
							.tag {
								position: absolute;
								right: 0;
								top: 0rpx;
								min-width: 40rpx;
								height: 40rpx;
								padding: 10rpx;
								font-size: 22rpx;
								color: #fff;
								display: flex;
								align-items: center;
								justify-content: center;
								background-color: $uni-color-error;
								border-radius: 40rpx;
							}
						}
	
						.price-wrap {
							display: flex;
							align-items: center;
							margin-left: 120rpx;
							color: #fff;
							font-size: 22rpx;
	
							.num {
								font-size: 36rpx;
							}
						}
					}
	
					.right {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						height: 100%;
	
						.settle {
							padding: 0 32rpx;
							height: 66rpx;
							line-height: 66rpx;
							font-size: 32rpx;
							color: #fff;
							background-color: $uni-color-error;
							border-radius: 66rpx;
						}
					}
				}
			}
	.sku-pop-wrap,.cart-pop-wrap{
		background: #fff;
		min-height: 300rpx;
		padding: 32rpx;
		/* #ifdef H5 */
		padding: 32rpx 32rpx 66px;
		/* #endif */
		border-radius: 20rpx 20rpx 0 0;
	}
}


</style>
